<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='320px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">表格显示设置</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="set_title flexbox flexcenter flexbetween">
                    <span class="font_14 color_01 set_text">表头设置</span>
                    <el-link :underline="false" type="primary" @click="resetTable">恢复默认</el-link>
                </div>
                <ul class="un_set">
                    <li>素材</li>
                    <li>消耗</li>
                    <li>支付ROI</li>
                    <li>GMV</li>
                </ul>
                <el-divider><span class="font_12 color_03">以上属性不可修改</span></el-divider>
                <ul class="has_set" id="items">
                    <li class="flexbox flexcenter flexbetween" v-for="item in tableHeader" :key="item.prop">
                        <div class="flexbox flexcenter">
                            <svg width="6" height="10" style="margin-right:10px;margin-top:2px" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="1" cy="1" r="1" fill="#B4B7BD" />
                                <circle cx="1" cy="5" r="1" fill="#B4B7BD" />
                                <circle cx="1" cy="9" r="1" fill="#B4B7BD" />
                                <circle cx="5" cy="1" r="1" fill="#B4B7BD" />
                                <circle cx="5" cy="5" r="1" fill="#B4B7BD" />
                                <circle cx="5" cy="9" r="1" fill="#B4B7BD" />
                            </svg>
                            {{item.title}}
                        </div>
                        <el-switch v-model="item.is_show" active-value='1' inactive-value="0">
                        </el-switch>
                    </li>
                </ul>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm()" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import Sortable from "sortablejs";
import { jlHead, qcHead } from "../../assets/js/material";
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            tableHeader: [],
            channel: null,
            qc_table_head: [],
            jl_table_head: [],
            dataType: null,
        };
    },
    created() {},
    methods: {
        getParentData(
            visible,
            data,
            channel,
            qc_table_head,
            jl_table_head,
            dataType
        ) {
            this.dialogVisible = visible;
            this.channel = channel;
            this.qc_table_head = qc_table_head;
            this.jl_table_head = jl_table_head;
            this.dataType = dataType;
            if (channel == 1) {
                if (dataType == 1) {
                    this.tableHeader =
                        data.length > 0
                            ? JSON.parse(JSON.stringify(data))
                            : JSON.parse(JSON.stringify(qcHead));
                } else if (dataType == 0) {
                    this.tableHeader =
                        data.length > 0
                            ? JSON.parse(JSON.stringify(data))
                            : JSON.parse(JSON.stringify(jlHead));
                }
            } else if (channel == 3) {
                this.tableHeader =
                    data.length > 0
                        ? JSON.parse(JSON.stringify(data))
                        : JSON.parse(JSON.stringify(jlHead));
            }
        },

        // 打开抽屉层初始化表格
        opens() {
            this.$nextTick(() => {
                this.test();
            });
        },

        // 拖拽
        test() {
            var that = this;
            var el = document.getElementById("items");
            // 常用
            new Sortable(el, {
                onEnd: function (evt) {
                    // 获取排序之后的data数据
                    that.tableHeader.splice(
                        evt.newIndex,
                        0,
                        that.tableHeader.splice(evt.oldIndex, 1)[0]
                    );
                    var newArray = that.tableHeader.slice(0);
                    that.tableHeader = [];
                    that.$nextTick(function () {
                        that.tableHeader = newArray;
                    });
                },
            });
        },

        // 提交添加
        async submitForm() {
            this.loading = true;
            let subData = {};
            if (this.channel == 1) {
                if (this.dataType == 1) {
                    subData = {
                        jl_head: this.jl_table_head,
                        qc_head: this.tableHeader,
                    };
                } else if (this.dataType == 0) {
                    subData = {
                        jl_head: this.tableHeader,
                        qc_head: this.qc_table_head,
                    };
                }
            } else if (this.channel == 3) {
                subData = {
                    jl_head: this.tableHeader,
                    qc_head: this.qc_table_head,
                };
            }
            var { data: res } = await this.$http.post(
                "adminapi/material/materialTableSave",
                {
                    material_field: subData,
                }
            );

            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.$emit("getHeaderData");
                this.resetForm();
            }
        },

        // 重置表头
        resetTable() {
            this.$confirm("是否要恢复默认?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    if (this.channel == 1) {
                        if(this.dataType==1){
                            this.tableHeader = qcHead;
                        }else if(this.dataType==0){
                            this.tableHeader = jlHead;
                        }
                        // this.tableHeader = qcHead;
                    } else if (this.channel == 3) {
                        this.tableHeader = jlHead;
                    }
                })
                .catch(() => {});
        },

        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.set_text {
    font-weight: bold;
}
.un_set {
    margin-top: 15px;
}
.un_set li {
    line-height: 40px;
    font-size: 14px;
    color: #17233d;
}
.has_set {
}
.has_set li {
    cursor: all-scroll;
    height: 40px;
    font-size: 14px;
    color: #17233d;
}
</style>
